import './index.css'
import React, {useEffect, useState} from "react";
import {useNavigate} from "react-router-dom";
import {airConditionInfo, batteryInfo, repairInfo} from "../../Datasource";
import {Card, Space, List, Button} from 'antd-mobile'


//故障
const Fault = () => {
    const navigate = useNavigate()
    const [list, setList] = useState<any[]>([])


    useEffect(() => {
        const temp: any[] = []
        repairInfo.map(e => {
            if (e.type === 1) {
                airConditionInfo.map(a => {
                    if (a.id === e.deviceId) {
                        const faultItem = {
                            ...e,
                            device: a
                        }
                        temp.push(faultItem)
                    }
                })
            } else if (e.type === 0) {
                batteryInfo.map(a => {
                    if (a.id === e.deviceId) {
                        const faultItem = {
                            ...e,
                            device: a
                        }
                        temp.push(faultItem)
                    }
                })
            }
        })
        setList(temp)
    }, [])


    if (list.length) {
        return <Space direction='vertical' block>
            <Card
                title={<div className={'card-add'}>
                    <div>{'故障报修'}</div>
                    <Button size='mini' color='primary' className={'card-add-button'} onClick={() => {
                        navigate(`/fault/add`)
                    }}>新增</Button>
                </div>}
                className={'dashboard-card'}>
                <List className={'card-content'}>
                    {
                        list.map(a => <List.Item extra={a.device.name}
                                                 key={a.id}
                                                 onClick={() => {
                                                     navigate(`/faultInfo/${a.type}/${a.deviceId}`)
                                                 }}>
                            {a.device.machineRoom}
                        </List.Item>)
                    }
                </List>
            </Card>

        </Space>
    } else {
        return null
    }

}

export default Fault
